<template>
	<view class="message">
		<image class="video" :src="message.payload.videoUrlimg" mode="aspectFill"></image>
		<view class="pos-video" @click="previewMaterial(message.payload.videoUrl)">
			<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/tx_im/videoss.png"></image>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		message: {
			type: Object,
			default: {}
		}
	})

	const previewMaterial = (url) => {
		uni.navigateTo({
			url: `/im/pages/video?url=${url}`
		})
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.message {
		background-color: #E4F0FE;
		position: relative;

		.video {
			width: 180rpx;
			height: 200rpx;
		}

		.pos-video {
			width: 180rpx;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 100;
			top: 0;
			left: 0;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>